<template slot-scope="scope">
  <div class="box">
    <div class="box-left">
      <div class="top-title">
        <p>
          发票抬头信息<span
            >(个人申请，需实名认证，且发票类型不可更改，最多添加6条)</span
          >
        </p>
        <div class="add-btn">添加</div>
      </div>
      <!-- 主体 -->
      <div class="main-body">
        <div class="body">
          <div class="body-top">
            <p style="width: 24%" v-for="(item, index) in listArr" :key="index">
              {{ item }}
            </p>
          </div>
          <div class="body-cen" v-for="(item, index) in dataArr" :key="index">
            <p style="width: 24%">{{ item.Lookup }}</p>
            <p style="width: 24%">{{ item.type }}</p>
            <p style="width: 24%">{{ item.upType }}</p>
            <div style="width: 24%">
              <p>编辑</p>
              <p>删除</p>
              <p>设置默认</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">3/6</div>
    </div>
    <div class="box-left">
      <div class="top-title">
        <p>邮寄地址<span>(最多添加12条)</span></p>
        <div class="add-btn">添加</div>
      </div>
      <!-- 主体 -->
      <div class="main-body">
        <div class="body">
          <div class="body-top">
            <p
              style="width: 24%"
              v-for="(item, index) in listArr1"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
          <div class="body-cen" v-for="(item, index) in dataArr1" :key="index">
            <p style="width: 24%">{{ item.address }}</p>
            <p style="width: 24%">{{ item.telephone }}</p>
            <div style="width: 24%">
              <p>编辑</p>
              <p>删除</p>
              <p>设置默认</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">1/12</div>
    </div>
    <div class="box-left">
      <div class="top-title">
        <p>电子邮箱管理<span>(最多添加12条)</span></p>
        <div class="add-btn">添加</div>
      </div>
      <!-- 主体 -->
      <div class="main-body">
        <div class="body">
          <div class="body-top">
            <p
              style="width: 24%"
              v-for="(item, index) in listArr2"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
          <div class="body-cen" v-for="(item, index) in dataArr2" :key="index">
            <p style="width: 24%">{{ item.mailbox }}</p>
            <div style="width: 24%">
              <p>编辑</p>
              <p>删除</p>
              <p>设置默认</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">1/12</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // deviceList: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
    dialogVisible: {},
    select: {},
    num: {},
  },
  components: {},
  data() {
    return {
      listArr: ["发票抬头", "发票类型", "抬头类型", "操作"],
      listArr1: ["地址", "电话", "操作"],
      listArr2: ["邮箱", "操作"],
      dataArr: [
        {
          Lookup: "xx公司",
          type: "增值税普通发票",
          upType: "企业",
        },
        {
          Lookup: "xx公司",
          type: "增值税普通发票",
          upType: "企业",
        },
      ],
      dataArr1: [
        {
          address: "河南省南阳市",
          telephone: "1823774522",
        },
      ],
      dataArr2: [
        {
          mailbox: "707046298@163.com",
        },
      ],
    };
  },
  computed: {},
  created() {},
  methods: {},
};
</script>

<style scoped lang="less">
.box {
  .box-left:nth-child(1) {
    margin-top: 0px;
  }
  .box-left {
    width: 100%;
    font-size: 14px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
    .top-title {
      width: 95%;
      height: 35px;
      line-height: 35px;
      display: flex;
      position: relative;
      margin: auto;
      margin-top: 10px;
      p {
        font-size: 15px;
        span {
          font-size: 14px;
        }
      }
      .add-btn {
        width: 50px;
        height: 25px;
        line-height: 25px;
        color: #ffffff;
        text-align: center;
        background-color: #3291f8;
        border-radius: 3px;
        position: absolute;
        right: 0px;
        top: 5px;
      }
    }
  }
  .main-body {
    width: 95%;

    margin: auto;
    display: flex;
    .body {
      width: 90%;

      .body-top {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        p {
          font-weight: 600;
        }
      }
      .body-cen {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        div {
          display: flex;
          p {
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            height: 28px;
            width: 65px;
            line-height: 28px;
            background-color: #e99d42;
            border-radius: 3px;
            margin-left: 10px;
          }
          p:nth-child(1) {
            margin-left: 0px;
          }
          p:nth-child(2) {
            background-color: #bd3124;
          }
          p:nth-child(3) {
            background-color: #6c6c6c;
          }
        }
      }
    }
  }
  .bottom {
    width: 95%;
    height: 30px;
    line-height: 30px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
